$light-stroke: $gray-20;
$dark-stroke: #2d2d2d;
$active-stroke: $blue-30;

$light-fill: $gray-30;
$active-fill: $blue-20;
$hover-fill: $gray-10;
$selected-fill: #c7ced7;

$active-switch: $blue-50;

$medium: 400;
$bold: 700;
$lato: $sans-serif-font-stack;

$indent: 15px;
$control-row-height: 32px;

@at-root .GrapherSettingsPopover {
    background: white;
    border-radius: 4px;
    box-shadow: 0px 4px 23px 4px #0000000f;
    z-index: $zindex-controls-popup;
    overflow-y: auto;

    // Sticky header with title and close button
    .GrapherSettingsPopover__Header {
        background: white;
        margin: 0;
        padding: 9px 15px 3px 15px;
        position: sticky;
        top: 0;
        z-index: 1;

        .overlay-header {
            padding: 0;
        }
    }

    .GrapherSettingsPopover__Content {
        //
        // shared button coloring & behaviors
        //
        button {
            display: flex;
            align-items: center;
            color: $light-text;
            background: white;
            border: 1px solid $light-stroke;
            font: $medium 13px/16px $lato;
            letter-spacing: 0.01em;
            border-radius: 4px;
            padding: 7px;
            height: 40px;

            &:hover {
                background: $hover-fill;
                cursor: pointer;

                &:not(.active) {
                    color: $dark-text;
                }
            }

            &.active,
            &:active {
                background: $active-fill;
                border: 1px solid $active-fill;
            }

            &.active {
                cursor: default;
                color: $active-text;
            }
        }

        //
        // each titled block of control widgets (with optional info-circle + tooltip)
        //
        section {
            font: $medium 14px/1.2 $lato;
            color: $light-text;
            padding: 1em 0;
            margin: 0 $indent;

            .config-name {
                font: $bold 14px/1.2 $lato;
                color: $dark-text;
                list-style: none;

                svg {
                    color: $gray-60;
                    height: 13px;
                    padding: 0 0.333em;
                }
            }

            .labeled-switch .labeled-switch-subtitle,
            .config-subtitle {
                font-size: 13px;
                margin: 5px 0;
            }

            .config-toggle {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0.5em 0;
            }

            & + section {
                border-top: 1px solid $light-stroke;
            }
        }

        //
        // resuable widgets
        //
        section {
            // left/right pairs of options
            .config-toggle {
                label {
                    flex-basis: 100%;
                    color: $dark-text;
                    margin-bottom: 0.5em;
                }
                button {
                    width: calc(50% - 5px);
                    padding: 7px 16px;
                }
            }

            // on/off switch with label written to the right
            .labeled-switch {
                margin: 14px 0;
                display: block;
            }

            // vertical list of options (for selecting faceting mode)
            .config-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 7px 0;
                button {
                    width: 100%;

                    .faceting-icon {
                        display: flex;
                        flex-wrap: wrap;
                        width: 34px;
                        height: 24px;
                        justify-content: space-between;
                        margin-right: 8px;
                        span {
                            // the round-rects that make up the grid
                            display: inline-block;
                            width: 100%;
                            height: 100%;
                            border-radius: 2px;
                            background: $light-stroke;
                        }
                    }

                    &.entity span {
                        width: 10px;
                        height: 10px;
                    }

                    &.metric span {
                        width: 10px;
                        height: 10px;
                        border-radius: 5px;
                    }

                    &.active span {
                        background: $blue-30;
                    }

                    &:hover:not(.active) span {
                        background: $light-fill;
                    }

                    &:active:not(.active) span {
                        background: $light-text;
                    }
                }
            }
        }
    }
}
